<template>
	<div class="bookgit">
		<div class="tablist">
			<!-- 出版社 -->
			<div class="swiper-container presslist" style="border-bottom: 1px dotted white">
				<!-- swiper-wrapper轮播区域 -->
				<ul class="tab swiper-wrapper">
				<li class="swiper-slide" @click="selAll()">全部</li>
					<li class="swiper-slide" v-for="(item,i) in pressList" :key="i">
						<a @click="Maker(item)">{{item}}</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="tablist">
			<!-- 出版时间 -->
			<div class="swiper-container timelist" style="border-bottom: 1px dotted white">
				<ul class="tab swiper-wrapper">
					<li class="swiper-slide" @click="selAll()">全部</li>
					<li class="swiper-slide" v-for="item in publicationDate" @click="selTwo(item)">
						{{item}}
					</li>
				</ul>
			</div>
		</div>
		<div class="tablist">
			<ul v-for="(item ,i) in list">
					<li :key="item.id">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.pic}`" />
						<h3>{{item.name}}</h3>
						<span v-show="act==1">{{item.press}}</span>
						<span v-show="act==2">{{item.time}}</span>
					</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Swiper from 'swiper'
	import MobileList from '@/components/mobile/home/MobileList.vue'
	export default {
		name: 'MobileBookGit',
		components: {
			MobileList
		},
		data() {
			return {
				act:0,
				hotlist: [],
				pressList: ['机械出版社', '深刻的出版社', '实践活动出版社',
					'圣诞节哈佛出版社', '加沙的尴尬出版社',
					'暗黑世界大会出版社', '等哈送给大家出版社'
				],
				publicationDate: [],
				list: [],
				newsList: [],
				categoryMenus: [{
						id: 2,
						name: '计算机类书籍',
						pid: 0,
						prio: 100,
						isdel: 0
					},
					{
						id: 1,
						name: '儿童书籍',
						pid: 0,
						prio: 101,
						isdel: 0
					},
					{
						id: 3,
						name: '小说类书籍',
						pid: 0,
						prio: 103,
						isdel: 0
					},
					{
						id: 4,
						name: '小学教材',
						pid: 0,
						prio: 105,
						isdel: 0
					},
					{
						id: 5,
						name: '初中教材',
						pid: 0,
						prio: 110,
						isdel: 0
					},
					{
						id: 6,
						name: '高中教材',
						pid: 0,
						prio: 130,
						isdel: 0
					},
					{
						id: 15,
						name: '拼音读物',
						pid: 1,
						prio: 100009,
						isdel: 0
					},
					{
						id: 14,
						name: '漫画',
						pid: 1,
						prio: 101008,
						isdel: 0
					},
					{
						id: 7,
						name: 'Java程序设计',
						pid: 2,
						prio: 10001,
						isdel: 0
					},
					{
						id: 10,
						name: 'Java面向对象',
						pid: 2,
						prio: 10004,
						isdel: 0
					},
					{
						id: 11,
						name: 'Java Web',
						pid: 2,
						prio: 10005,
						isdel: 0
					},
					{
						id: 12,
						name: 'MySQL数据库开发',
						pid: 2,
						prio: 10007,
						isdel: 0
					},
					{
						id: 13,
						name: 'SSM框架开发',
						pid: 2,
						prio: 10009,
						isdel: 0
					},
					{
						id: 9,
						name: 'SpringBoot',
						pid: 2,
						prio: 10020,
						isdel: 0
					}
				]
			}
		},
		methods: {
			getAllBooksType() {
				this.$axios.get("http://127.0.0.1/api/public/type/findAll2")
					.then((resp) => {
						console.log(resp.data.data);
						resp.data.data.forEach((item) => {
							this.categoryMenus.push(item)
						})
					})
			},
			selAll() {
				this.list = this.newsList
			},
			selOne(i) {
				this.act = 1
				this.list = []
				this.newsList.forEach((item) => {
					if (i.press == item.press) {
						this.list.push(item)
					}
				})
			},
			selTwo(i) {
				this.act = 2
				this.list = []
				this.newsList.forEach((item) => {
					if (i.time == item.time) {
						this.list.push(item)
					}
				})
			}
		},
		//组件模板渲染完成后
		mounted() {
			this.getAllBooksType();
			this.$get("/api/public/findPageBook/1/20/0").then((resp)=>{
				this.newsList=resp.data.data.books
				console.log("newsList=========="+this.newsList);
			})
			//出版日期循环
			let maxYear = new Date().getFullYear() + 1;
			for (let i = 2019; i <= 2024; i++) {
				this.publicationDate.push(i);
			}
			//调用轮播对象
			//挂载
			new Swiper('.presslist', {
				//根据slide的宽度自动调整展示数量。
				slidesPerView: 'auto',
				//调整轮播项之间的间距
				spaceBetween: 20
			});
			new Swiper('.timelist', {
				slidesPerView: 'auto',
				//调整轮播项之间的间距
				spaceBetween: 20
			})
			this.selAll()
		}
	}
</script>

<style scoped>
	.bookgit {
		width: 100%;
		background-color: #f5d5a0;
	}
	
	.bookgit .tablist {
		width: 95%;
		margin: 0 auto 1rem;
	}
	
	.bookgit .tablist .tab {
		margin-top: 0.5rem;
		height: 2.5rem;
		/* 行高高度等于标签高度=垂直剧中 */
		line-height: 2.5rem;
		border-bottom: 1px solid white;
	}
	
	.bookgit .tablist .presslist .tab li {
		font-size: 0.875rem;
		/* 不设置任何宽度包括0 */
		width: unset;
		color: #715e3e;
	}.bookgit .tablist .presslist .tab li:hover{
		color: olivedrab;
	}
	
	.bookgit .tablist .timelist .tab li {
		font-size: 0.875rem;
		/* 不设置任何宽度包括0 */
		width: unset;
		margin-right: 2rem;
		color: #715e3e;
	}.bookgit .tablist .timelist .tab li:hover{
		color: olivedrab;
	}
	.bookgit .tablist .splist .tab li:hover{
		color: olivedrab;
	}
	.bookgit .tablist .splist .tab li {
		margin-right: 2rem;
		font-size: 0.875rem;
		/* 不设置任何宽度包括0 */
		width: unset;
		color: #715e3e;
	}.show{
		width: 98%;
		border: 1px solid gainsboro;
		margin: 0 auto;
	}
</style>